<!--
 * @Description: 商务成本信息填报（月度）
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2024-03-01 16:17:33
 * @LastEditTime: 2024-03-01 16:18:11
 * @FilePath: \cscec-pms-admin\src\views\businessAffairs\businessCostPlanManagement\costPlanManagement\costPlan\components\InformationFilling\index.vue
-->
<template>
  <!-- 商务成本信息填报 -->
  <a-card>
    <a-row :gutter="10" class="page-height">
     <!-- 树搜索 -->
     <a-col :span="4" class="permission-collapsed" :class="{ 'permission-tree-collapsed': collapsed }">
        <a-card :style="{ border: collapsed ? 'none' : 'border: 1px solid #e8e8e8' }" class="page-height-tree">
          <PermissionTreeOrganization :collapsed.sync="collapsed" parentDisabled @select="handleSelect" :isCostTree="true" :isSecondLevel="true" />
        </a-card>
      </a-col>
      <!-- 树搜索 -->
      <a-col :span="20" class="permission-collapsed page-height-list-wrapper" :style="collapsed ? 'width:calc(100% - 10px)' : ''">
        <a-row>
          <searchData :searchData="searchArr" @search="search"></searchData>
        </a-row>
        <list-table ref="table" :columns="columns" :startIndex="1" :request="loadData" :page-keys="['pageNum', 'pageSize', 'total']">
          <template v-for="(col) in ['currentTargetAmount', 'cumulativeActualAmount', 'actualTargetRate'] "
           :slot="col"
            slot-scope="text"
           
          >
            <div  :key="col">{{ text | setPlaceholder }} </div>
          </template>
          <span slot="operation" slot-scope="text, record">
            <MoreButton>
              <!-- <MoreButton> -->
              <a v-btnPermission="'bm_047_loo_06'" @click="handleManage(record, 1)">查看</a>
              <a-divider type="vertical" v-if="record.submitStatus*1===1 && !getYearMonth(record) || record.isEdit*1!==1"/>
              <!-- 编辑 -->
              <span>
                <a v-btnPermission="'bm_047_edi_07'" v-if="record.submitStatus*1===1 && !getYearMonth(record)" @click="handleManage(record, 2)">补录</a>
                <template v-else>
                  <a v-btnPermission="'bm_047_edi_07'" v-if="record.isEdit*1!==1" @click="handleManage(record, 2)">填报</a>
                </template>
              </span>
            </MoreButton>
          </span>

          <span slot="status" slot-scope="text, record">
            <list-status :status="record.status" :isApproval="true" conversion="en" :text="text"></list-status>
          </span>
        </list-table>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import BasePage from '@/views/basePage' // 基础配置
import { getPageComBusinessCostMonthly } from '@/api/businessAffairs/monthlyBusiness'
import TreeProject from '@/components/businessComponents/TreeProject' // 树
import MoreButton from '@/components/MoreButton'
import PermissionTreeOrganization from '@/components/businessComponents/PermissionTreeOrganization'
import moment from 'moment';
import { placeholder } from '../../../../headquartersDashboard/components/placeholderWay.js'
const columns = [
  {
    title: '序号',
    width: 80,
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    }
  },
  {
    title: '分公司',
    dataIndex: 'branchComName',
    ellipsis: true
  },
  {
    title: '所属项目',
    dataIndex: 'projectName',
    ellipsis: true
  },
  {
    title: '填报期数',
    dataIndex: 'monthStr',
    ellipsis: true
  },
  {
    title: '业态',
    dataIndex: 'typeStr',
    ellipsis: true
  },
  {
    title: '当期累计目标成本',
    dataIndex: 'currentTargetAmount',
    ellipsis: true
  },
  {
    title: '累计实际成本',
    dataIndex: 'cumulativeActualAmount',
    ellipsis: true
  },
  {
    title: '累计实际成本/当期累计目标成本',
    dataIndex: 'actualTargetRate',
    ellipsis: true
  },
  {
    title: '填报时间',
    dataIndex: 'submitDate'
  },
  {
    title: '状态',
    dataIndex: 'submitStatusStr',
    scopedSlots: { customRender: 'submitStatusStr' }
  },
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    width: '180px',
    scopedSlots: { customRender: 'operation' }
  }
]

import { STable } from '@/components'
export default {
  name: 'a' + Date.now(),
  extends: new BasePage(),
  components: {
    STable,
    TreeProject,
    MoreButton,
    PermissionTreeOrganization
  },
  data() {
    this.columns = columns

    return {
      selectOptions: {},
      collapsed:false,
      queryParam: {},
      projectIds: [],
      loadData: async (parameter) => {
        // console.log(parameter,2);
        const searchQuery = {
          orgSet: [],
          projectSet: []
        }
        if (this.selectOptions?.tageCode === 'BC') {
          searchQuery.orgSet = [this.selectOptions.orgId]
          searchQuery.projectSet =this.projectIds
        }
        // 三级-项目id
        if (this.selectOptions?.tageCode === 'PD') {
          searchQuery.projectSet = [this.selectOptions.projectId]
        }
        let searchData = Object.assign(parameter, { param: { searchQuery, ...this.queryParam } })
        // console.log(searchData,3);
        return getPageComBusinessCostMonthly(searchData).then((res) => {
          return res
        })
      },
      searchArr: [
        {
          name: '填报期数',
          type: 'monthRange',
          value: 'talksDate',
          attr: {
            rangeFormat: ['startMonth', 'endMonth']
          }
        },
        {
          name: '业态',
          value: 'typeList',
          type: 'selectMode',
          maxTagCount:2,
          maxTagTextLength:5,
          data: [
            {
              value: '1',
              label: '土建'
            },
            {
              value: '2',
              label: '安装'
            },
            {
              value: '3',
              label: '基础设施'
            },
            {
              value: '4',
              label: '水利水电与水务环保'
            },
            {
              value: '5',
              label: '装饰与城市更新'
            }
          ]
        },
        {
          name: '填报时间',
          type: 'dateRange',
          value: 'talksDate1',
          attr: {
            rangeFormat: ['strartSubmitDate', 'endSubmitDate']
          }
        },
        {
          name: '状态',
          value: 'submitStatusList',
          type: 'selectMode',
          data: [
            {
              value: '0',
              label: '待填报'
            },
            {
              value: '1',
              label: '已填报'
            },
            {
              value: '2',
              label: '逾期未填报'
            }
          ]
        }
      ]
    }
  },
  filters:{
    setPlaceholder(val){
      return placeholder(val)
    }
  },
  created() {},
  watch: {
    //监听路由变更
    $route(newVal) {
      console.log(newVal, 'newVal');
      if(newVal.path == "/businessAffairs/businessCostPlanManagement/costPlanManagement/costPlan"){
        this.search();
      }
      
    },
  },
  methods: {
    //比较时间
    getYearMonth(data){
      const now = moment(),
        newMonth = now.format("YYYY-MM");
        if(data.month == newMonth){  //不是本月就是补录
          return true
        }else{
          return false
        }
    },
    handleSelect(node) {
      // console.log(node,1);
      this.selectOptions = node
      // if(node.tageCode === 'CO') return;
      this.projectIds = [];
      if(node.tageCode === 'BC' && node.childTree && node.childTree.length) {
        node.childTree.map(item=> {
          if(item.tageCode === 'PD') {
            this.projectIds.push(item.projectId);
          }
        })
      }
      if(node.tageCode === 'PD') {
        this.projectIds.push(node.projectId);
      }
      this.search();
    },
    //搜索
    search(value) {
      value && (this.queryParam = value)
      this.$refs.table.refresh(true)
      this.$nextTick(()=>{
      setTimeout(()=>{
        const tableRef = this.$refs.table
        tableRef.tableData  =  placeholder(tableRef.tableData)
      },3500)

    })
    },
    // 操作栏
    handleManage(record, type) {
      let query = {
        editModel: type
      }
      if (record && record.id) {
        query.id = record.id
        query.submitStatus = record.submitStatus
      }
      this.$router.push({
        name: 'updateFilling',
        query
      })
    }
  }
  
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
// .page-height-tree {
//   @{deep} .permission-tree-organization-btn {
//     display: none;
//   }
// }
</style>
